<template>
  <div class="test-two">
    <el-button>TestTwo</el-button>
    <div class="todo-contents">
      <span>待办事项列表：</span>
      <template v-for="(e, i) in todoContents">
        <div :key="i">
          <template v-if="!e.isEditing">
            <el-checkbox v-model="e.isDone"> </el-checkbox>
            <el-tag :closable="true" @click="edit(e)" @close="remove(e)">{{
              e.title
            }}</el-tag>
          </template>
          <template v-else>
            <el-input size="mini" v-model="e.title" @blur="save(e)"></el-input>
          </template>
        </div>
      </template>
    </div>
    <div class="done-contents">
      <span>已办事项列表：</span>
      <template v-for="(e, i) in doneContents">
        <div :key="i">
          <el-tag>{{ e.title }}</el-tag>
        </div>
      </template>
    </div>
    <div class="insert-content">
      <el-input v-model="newContent.title"></el-input>
      <el-button @click="insert">新增事项</el-button>
    </div>
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "TestTwo",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      newContent: {
        title: null,
        isDone: false,
        isEditing: false,
      },
      contents: [
        { title: "去商场买饮料", isDone: false, isEditing: false },
        { title: "洗衣服", isDone: false, isEditing: false },
        { title: "取快递", isDone: true, isEditing: false },
        { title: "租书", isDone: true, isEditing: false },
      ],
    };
  },
  computed: {
    todoContents() {
      return this.contents.filter((e) => !e.isDone);
    },
    doneContents() {
      return this.contents.filter((e) => e.isDone);
    },
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    insert() {
      //不能新增为空
      if (!this.newContent.title) {
        this.$message.warning("新增事项不能为空。");
        return;
      }

      let p = JSON.parse(JSON.stringify(this.newContent));
      this.contents.push(p);

      this.newContent.title = "";
    },
    remove(content) {
      this.$message.warning("removing: " + content.title);
      let i = this.contents.indexOf(content);
      if (i !== -1) {
        this.contents.splice(i, 1);
      }
    },
    edit(content) {
      content.isEditing = !content.isEditing;
    },
    save(content) {
      content.isEditing = !content.isEditing;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.todo-contents {
  width: 20%;
  background-color: #ced60f;
}
.done-contents {
  width: 20%;
  background-color: #d5f3e4;
}
.test-two {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}
</style>
